<script lang="ts" setup>
import { reactive, watch } from 'vue';

interface QueryAdminParams {
  phone: string | undefined;
  account: string | undefined;
  nickName: string | undefined;
  email: string | undefined;
  weChartAccount: string | undefined;
  status: boolean | undefined;
}

// 多语言
const { t } = useI18nLocale()
// defineEmits用于定义组件可以触发的事件
const emit = defineEmits<{
  // (event: 'handleQuery', queryParam: object): void,
  (event: 'handleRefresh'): void
}>()


// 接收父组件传递的 props
const props = defineProps<{
  loading?: boolean;
}>();
console.log('子组件props',props);
// 解构 props 并设置默认值
const { loading = false } = toRefs(props);

// 定义参数
const queryParams= reactive<QueryAdminParams>({
  phone: '',
  account: '',
  nickName: '',
  email: '',
  weChartAccount: '',
  status: undefined
});

// 重置搜索
function handleReset() { 
  Object.assign(queryParams, {
    phone: '',
    account: '',
    nickName: '',
    email: '',
    weChartAccount: '',
    status: undefined,
  });
  emit('handleRefresh')
}
 
// 调试：打印 queryParams
watch(queryParams, (newValue) => {
  console.log('queryParams 更新:', newValue);
}, { deep: true });

// 查询按钮，执行回调函数，子页面传递参数给父页面
// function handleQuery() {
//   // emit 函数：用于触发事件并传递数据
//   emit('handleQuery', queryParams)
// }
function handleRefresh() {
  emit('handleRefresh')
}
// 暴露需要让父组件访问的函数和对象
defineExpose({ queryParams })

onMounted(() => {
  console.log('组件挂载1');
});

onMounted(() => {
  console.log('组件挂载2');
});

onUnmounted(() => {
  console.log('组件卸载');
});

onUpdated(() => {
  console.log('params组件更新');
});

onBeforeUpdate(() => {
  console.log('params组件将要更新');
});

onActivated(() => {
  console.log('keepAlive 组件 激活');
});

onDeactivated(() => {
  console.log('keepAlive 组件 非激活');
});
</script>

<template>
    <!-- <pre>{{ queryParams }}</pre> -->
  <a-card bordered :title="t('lang.title.filterqueryParams')">
    <a-form class="element-top"  :model="queryParams" 
    :labelCol="{ md: { span: 6 }, xs: { span: 24 }, sm: { span: 12 } }" 
    :wrapperCol="{ md: { span: 18 }, xs: { span: 24 }, sm: { span: 12 } }">
      <a-row :gutter="8">
        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
          <a-form-item :label="t('lang.form.phone')">
            <a-input v-keyupEnter="{ callback: handleRefresh }" v-model.trim="queryParams.phone" :placeholder="t('lang.placeholder.phone')" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
          <a-form-item :label="t('lang.form.account')">
            <a-input v-keyupEnter="{ callback: handleRefresh }" v-model.trim="queryParams.account" :placeholder="t('lang.placeholder.account')" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
          <a-form-item :label="t('lang.form.nickName')">
            <a-input v-keyupEnter="{ callback: handleRefresh }" v-model.trim="queryParams.nickName" :placeholder="t('lang.placeholder.nickName')" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
          <a-form-item :label="t('lang.form.email')">
            <a-input v-keyupEnter="{ callback: handleRefresh }" v-model.trim="queryParams.email" :placeholder="t('lang.placeholder.email')" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
          <a-form-item :label="t('lang.form.weChartAccount')">
            <a-input v-keyupEnter="{ callback: handleRefresh }" v-model.trim="queryParams.weChartAccount" :placeholder="t('lang.placeholder.weChartAccount')" />
          </a-form-item>
        </a-col>
        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8" :xxl="8">
          <a-form-item :label="t('lang.form.status')">
            <a-select allowClear v-keyupEnter="{ callback: handleRefresh }" v-model="queryParams.status" :placeholder="t('lang.placeholder.status')">
              <a-select-option value="true" key="true">{{ t('lang.key.status.true') }}</a-select-option>
              <a-select-option value="false" key="false">{{ t('lang.key.status.false') }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <!--查询按钮-->
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" style="text-align: right; margin-top: 4px">
          <span class="table-page-search-submitButtons">
            <a-button :loading="loading" @click="handleRefresh">{{
              t('lang.button.query')
              }}</a-button>
            <a-button class="element-left" @click="handleReset">{{
              t('lang.button.reset')
              }}</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>
